<template>
  <el-dialog
    title="试卷预览"
    :visible.sync="visible"
    width="80%"
    top="5vh"
    custom-class="paper-preview-dialog"
    @close="handleClose"
  >
    <div class="paper-preview" v-loading="loading">
      <div class="paper-header">
        <h2>{{ paperData.paperName }}</h2>
        <p class="paper-description">{{ paperData.description }}</p>
        <div class="paper-meta">
          <span>总分: {{ paperData.totalScore }}分</span>
          <span>及格分: {{ paperData.passScore }}分</span>
          <span>题数: {{ totalQuestionCount }}题</span>
        </div>
      </div>

      <div class="paper-content">
        <!-- 单选题 -->
        <div v-if="paperData.jsonData.single && paperData.jsonData.single.length" class="question-section">
          <h3>一、单选题 (每题{{ paperData.jsonData.singleScore }}分，共{{ paperData.jsonData.single.length }}题)</h3>
          <div v-for="(question, index) in paperData.jsonData.single" :key="question.questionId" class="question-item">
            <div class="question-title">
              <span class="question-index">{{ index + 1 }}.</span>
              <div v-html="question.questionText"></div>
            </div>
            <div class="question-options" v-if="question.options && question.options.length">
              <div v-for="option in question.options" :key="option.optionId" class="option-item">
                <span class="option-label">{{ option.label }}.</span>
                <span v-html="option.value"></span>
                <span v-if="showAnswers && option.checked" class="correct-answer-icon">✓</span>
              </div>
            </div>
            <div class="question-answer" v-if="showAnswers">
              答案: {{ question.correctAnswer }}
            </div>
          </div>
        </div>

        <!-- 多选题 -->
        <div v-if="paperData.jsonData.multiple && paperData.jsonData.multiple.length" class="question-section">
          <h3>二、多选题 (每题{{ paperData.jsonData.multipleScore }}分，共{{ paperData.jsonData.multiple.length }}题)</h3>
          <div v-for="(question, index) in paperData.jsonData.multiple" :key="question.questionId" class="question-item">
            <div class="question-title">
              <span class="question-index">{{ index + 1 }}.</span>
              <div v-html="question.questionText"></div>
            </div>
            <div class="question-options" v-if="question.options && question.options.length">
              <div v-for="option in question.options" :key="option.optionId" class="option-item">
                <span class="option-label">{{ option.label }}.</span>
                <span v-html="option.value"></span>
                <span v-if="showAnswers && option.checked" class="correct-answer-icon">✓</span>
              </div>
            </div>
            <div class="question-answer" v-if="showAnswers">
              答案: {{ question.correctAnswer }}
            </div>
          </div>
        </div>

        <!-- 填空题 -->
        <div v-if="paperData.jsonData.fill && paperData.jsonData.fill.length" class="question-section">
          <h3>三、填空题 (每题{{ paperData.jsonData.fillScore }}分，共{{ paperData.jsonData.fill.length }}题)</h3>
          <div v-for="(question, index) in paperData.jsonData.fill" :key="question.questionId" class="question-item">
            <div class="question-title">
              <span class="question-index">{{ index + 1 }}.</span>
              <div v-html="formatFillQuestion(question.questionText)"></div>
            </div>
            <div class="question-answer" v-if="showAnswers">
              答案: {{ question.correctAnswer }}
            </div>
          </div>
        </div>

        <!-- 判断题 -->
        <div v-if="paperData.jsonData.judge && paperData.jsonData.judge.length" class="question-section">
          <h3>四、判断题 (每题{{ paperData.jsonData.judgeScore }}分，共{{ paperData.jsonData.judge.length }}题)</h3>
          <div v-for="(question, index) in paperData.jsonData.judge" :key="question.questionId" class="question-item">
            <div class="question-title">
              <span class="question-index">{{ index + 1 }}.</span>
              <div v-html="question.questionText"></div>
            </div>
            <div class="question-answer" v-if="showAnswers">
              答案: {{ question.correctAnswer === 'A' ? '正确' : '错误' }}
            </div>
          </div>
        </div>

        <!-- 问答题 -->
        <div v-if="paperData.jsonData.essay && paperData.jsonData.essay.length" class="question-section">
          <h3>五、问答题 (每题{{ paperData.jsonData.essayScore }}分，共{{ paperData.jsonData.essay.length }}题)</h3>
          <div v-for="(question, index) in paperData.jsonData.essay" :key="question.questionId" class="question-item">
            <div class="question-title">
              <span class="question-index">{{ index + 1 }}.</span>
              <div v-html="question.questionText"></div>
            </div>
            <div class="question-answer" v-if="showAnswers">
              参考答案: {{ question.correctAnswer }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-checkbox v-model="showAnswers" style="float: left">显示答案</el-checkbox>
      <el-button-group>
        <el-button @click="handleExport('pdf')" icon="el-icon-download">导出PDF</el-button>
        <el-button @click="handleExport('word')" icon="el-icon-download">导出Word</el-button>
      </el-button-group>
      <el-button type="primary" @click="visible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PaperPreview',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    paperData: {
      type: Object,
      default: () => ({
        jsonData: {
          single: [],
          multiple: [],
          fill: [],
          judge: [],
          essay: []
        }
      })
    }
  },
  data() {
    return {
      loading: false,
      showAnswers: false
    }
  },
  computed: {
    totalQuestionCount() {
      const { jsonData } = this.paperData
      return (jsonData.single?.length || 0) +
        (jsonData.multiple?.length || 0) +
        (jsonData.fill?.length || 0) +
        (jsonData.judge?.length || 0) +
        (jsonData.essay?.length || 0)
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleExport(type) {
      this.loading = true
      this.$emit('export', type)
      setTimeout(() => {
        this.loading = false
        this.$message.success(`试卷已导出为${type}格式`)
      }, 1500)
    },
    formatFillQuestion(text) {
      // 将填空题的填空位置标记为下划线
      return text.replace(/____/g, '<span class="fill-blank">______</span>')
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-preview {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;

  .paper-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    h2 {
      margin: 0 0 10px 0;
      font-size: 24px;
      color: #333;
    }

    .paper-description {
      color: #666;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .paper-meta {
      span {
        margin: 0 15px;
        color: #888;
        font-size: 13px;
      }
    }
  }

  .question-section {
    margin-bottom: 30px;
    page-break-inside: avoid;

    h3 {
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      margin-bottom: 15px;
      color: #444;
    }
  }

  .question-item {
    margin-bottom: 20px;
    page-break-inside: avoid;

    .question-title {
      margin-bottom: 10px;
      line-height: 1.6;
      display: flex;

      .question-index {
        margin-right: 8px;
        font-weight: bold;
      }
    }

    .question-options {
      padding-left: 24px;

      .option-item {
        margin-bottom: 8px;
        line-height: 1.5;
        display: flex;

        .option-label {
          font-weight: bold;
          margin-right: 8px;
        }
      }
    }

    .question-answer {
      margin-top: 8px;
      padding: 8px 12px;
      background-color: #f5f7fa;
      border-radius: 4px;
      color: #67c23a;
      font-weight: bold;
    }
  }

  .fill-blank {
    border-bottom: 1px solid #333;
    padding: 0 10px;
  }
}

::v-deep .paper-preview-dialog {
  .el-dialog__body {
    padding: 0;
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid #eee;
  }
}

@media print {
  .paper-preview {
    max-height: none;
    overflow: visible;

    .question-section {
      margin-bottom: 20px;
    }

    .question-item {
      margin-bottom: 15px;
    }
  }
}
/* 新增正确选项标记样式 */
.correct-answer-icon {
  margin-left: 8px;
  color: #67c23a;
  font-weight: bold;
}

</style>
